<!--
 * @Author: 273198238 '2412069378@qq.com'
 * @Date: 2025-03-12 18:21:54
 * @LastEditors: 273198238 '2412069378@qq.com'
 * @LastEditTime: 2025-03-13 16:05:48
 * @FilePath: \vue-managed\src\views\MyCourse.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <Input @init="HandleContainer" :newlength="newlength" />
    <div class="contain">
      <ul>
        <li v-for="(item, index) in newContainer" :key="index">
          <div class="item">{{item}}</div>
          <button class="btn" @click="remove(index)">删除</button>
        </li>
      </ul>
      <ul class="info">
        <li>
          <slot name="imageInfo">
          </slot>
        </li>
        <li>
          <slot name="additionalInfo"></slot>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Input from '@/components/Input.vue';

export default {
  name: "MyCourse",
  components: { Input },
  data() {
    return {
      newContainer: [],
      newlength: 0,
    }
  },
  methods: {
    HandleContainer(container){
      this.newContainer = container;
      this.newlength = this.newContainer.length;
    },
    remove(index){
      this.newContainer.splice(index, 1);
      this.newlength = this.newContainer.length;

    }

  }
};
</script>

<style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei';
  font-size: 14px;
  color: #333;
  list-style: none;
}
.info li{
width: 300px;
height: 300px;

}
</style>
